<template>
  <PageContainer>
    <Header title="创建智能体" />
    <view class="hb-p-4 hb-flex hb-flex-col hb-bg-primary">
      <TmText
        class="hb-mb-3"
        label="可授权使用社会组织会员信息一键创建智能助手，是否要一键创建？"
        color="#fff"
        :font-size="28"
      />
      <TmButton
        :margin="[0, 0]"
        :padding="[0, 32]"
        label="授权一键创建"
        :follow-theme="false"
        font-color="#fff"
        :font-size="28"
        color="#EA5E0E"
        :round="16"
        :height="64"
        @click="handleAuthClick"
      />
    </view>

    <TmForm
      layout="vertical"
      :padding="[0, 0]"
      @submit="handleSubmit"
      :transparent="true"
      :border="false"
      v-model="formData"
    >
      <view class="hb-bg-white hb-pt-3 hb-pb-1 hb-px-4 hb-box-shadow-base hb-rounded-xl hb-mb-4">
        <TmFormItem
          label="智能助手名称"
          :show-top-error-gap="false"
          required
          :margin="[0, 0]"
          :padding="[0, 0]"
          :transparent="true"
          :rules="[{ required: true, message: '请输入智能助手名称' }]"
          field="name"
        >
          <TmInput
            v-model="formData.name"
            :font-size="28"
            show-char-number
            :maxlength="20"
            placeholder="请输入智能助手名称"
          />
        </TmFormItem>
      </view>
      <view class="hb-bg-white hb-pt-3 hb-pb-1 hb-px-4 hb-box-shadow-base hb-rounded-xl hb-mb-4">
        <TmFormItem
          label="智能助手简介"
          :show-top-error-gap="false"
          required
          :margin="[0, 0]"
          :padding="[0, 0]"
          :transparent="true"
          :rules="[{ required: true, message: '请输入智能助手简介' }]"
          field="description"
        >
          <TmInput
            v-model="formData.description"
            :height="160"
            :font-size="28"
            :inputPadding="[16, 16]"
            placeholder="一句话介绍你的智能助手"
            type="textarea"
          />
        </TmFormItem>
      </view>
      <view class="hb-absolute hb-bottom-4 hb-left-0 hb-w-full hb-px-4">
        <TmButton
          :loading="submitLoading"
          label="一键创建"
          form-type="submit"
          :font-size="32"
          :round="16"
          block
          :height="88"
        />
      </view>
    </TmForm>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* createAi 创建智能体 */
  import { createAi } from '@/api/aiSettings';
  import { TabbarPageEnum } from '@/enums/PageEnum';
  import { useUserStore } from '@/store/modules/user';

  const formData = reactive({
    name: '',
    description: '',
  });

  const submitLoading = ref(false);
  /** 表单提交 */
  const handleSubmit = (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    if (!e.isPass) return;
    submitLoading.value = true;
    createAi({ name: e.data.name, description: e.data.description })
      .then(() => {
        useUserStore().getUserInfo();
        uni.showModal({
          title: '智能助手创建成功！',
          content: '恭喜创建智能助手成功！您还可以继续完善智能助手更多信息，是否要前往设置？',
          cancelColor: '#969799',
          cancelText: '回到首页',
          confirmColor: '#2878FF',
          confirmText: '高级设置',
          success: (res) => {
            if (res.confirm) {
              handleSuccess();
            } else {
              handleBack();
            }
          },
        });
      })
      .finally(() => {
        submitLoading.value = false;
      });
  };

  /** 授权一键创建 */
  const handleAuthClick = () => {
    navigateTo({
      name: 'aiAuthCreate',
    });
  };

  /** 回到首页 */
  const handleBack = () => {
    switchTab(TabbarPageEnum.BASE_HOME);
  };

  /** 关闭当前页面跳转高级设置 */
  const handleSuccess = () => {
    reLaunch({
      name: 'aiAdvancedSettings',
    });
  };
</script>

<style lang="scss" scoped></style>
